<template>
	<view class="video" :style="{height:windowHeight+'rpx'}">
		<swiper vertical="true" @change='Switchvideo'>
			<swiper-item v-for="(item,i) in videos" :key="i">
				<video :id="changgeid(i)" :src=item.src loop="true" enable-play-gesture='true'
					object-fit="fill"></video>
				<view class="text">
					{{item.content}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				videos: [],
			};
		},
		onLoad(option) {
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight * (750 / sysInfo.windowWidth)
			this.videos = []
			this.getvedio(option.id)
		},
		methods: {
			async getvedio(id) {
				const datas = await uni.$http.get('/cantlogin/getVedioDataById?id=' + id)
				if (datas.statusCode !== 200) return uni.$showMsg()
				this.videos = datas.data
				this.videoContext = uni.createVideoContext('myVideo0');
				this.videoContext.play();
			},
			async getmorevedio() {
				const datas = await uni.$http.get('/cantlogin/getRandVedioData')
				if (datas.statusCode !== 200) return uni.$showMsg()
				this.videos.push(datas.data)
			},
			changgeid(i) {
				return 'myVideo' + i
			},
			Switchvideo(e) {
				// 展厅所有视频
				for (let id = 0; id < this.videos.length; id++) {
					this.videoContext = uni.createVideoContext('myVideo' + id);
					this.videoContext.pause();
				}
				// 播放当前视频
				if (e.detail.current == this.videos.length - 1)
					this.getmorevedio()
				this.videoContext = uni.createVideoContext('myVideo' + e.detail.current);
				this.videoContext.seek(0)
				this.videoContext.play();
			}
		},
	}
</script>

<style lang="less">
	.video {
		background-color: black;
		position: relative;

		swiper,
		swiper-item,
		video {
			width: 750rpx;
			height: 100%;
		}

		.text {
			position: absolute;
			color: #ffffff;
			;
			padding: 30rpx;
			z-index: 99999999;
			left: 40rpx;
			bottom: 150rpx;
			font-size: 30rpx;
		}
	}
</style>
